<template>
	<view>
		<view class="HuaTi-ShuRu">
			<text class="iconfont icon-huatifuhao"></text>
			<input
				placeholder="请输入话题..."
				placeholder-style="color: #C0C4CC;"
				type="text"
				v-model="HuaTi_NeiRong">
			<view @click="DianJi_ChaRu('ShuRu')">插入</view>
		</view>
		
		
		<view class="YouRan-UI-XuanXiangKa-2 Flex Bj-BeiJingSe" style="margin-bottom: 0;">
			<view class="XunHuan Flex" @click="DianJi_QieHuan_Tab(1)">
				<text :class="QieHuanKa==1?'Zi H3 H3-Line':'Zi H3 H3-Line Zt-ZhanWeiSe'">推荐话题</text>
			</view>
			<view class="XunHuan Flex" @click="DianJi_QieHuan_Tab(2)">
				<text :class="QieHuanKa==2?'Zi H3 H3-Line':'Zi H3 H3-Line Zt-ZhanWeiSe'">话题列表</text>
			</view>
		</view>
		
		<template v-if="QieHuanKa==1">
			<view class="TuiJian-HuaTi-LieBiao">
				<view
					@click="DianJi_ChaRu('XuanZe',item)"
					v-for="item in TuiJian_HuaTi_LieBiao">
					{{item}}
				</view>
			</view>
		</template>
		<template v-if="QieHuanKa==2">
			<!-- 热门话题推荐 -->
			<view style="margin: 25rpx 0 0 25rpx;font-weight: bold;">热门话题推荐</view>
			<view class="YouRan-UI-LieBiao-8 Flex">
				<view
					@click="DianJi_ChaRu('XuanZe',item.hname)"
					class="XunHuan H3 H3-Line"
					v-for="item in HuaTi_LieBiao">{{item.hname}}({{item.postCount}})</view>
			</view>
			
			<!-- 最新话题推荐 -->
			<view style="margin: 50rpx 0 0 25rpx;font-weight: bold;">最新话题推荐</view>
			<view class="YouRan-UI-LieBiao-8 Flex">
				<view
					@click="DianJi_ChaRu('XuanZe',item.hname)"
					class="XunHuan H3 H3-Line"
					v-for="item in HuaTi_LieBiao_ZuiXin">{{item.hname}}({{item.postCount}})</view>
			</view>
		</template>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				QieHuanKa:1,
				HuaTi_NeiRong:"",
				HuaTi_LieBiao:[],
				HuaTi_LieBiao_ZuiXin:[],
				TuiJian_HuaTi_LieBiao:[],
			}
		},
		onLoad(e) {
			this.ShiFou_ZuJian_GuoLai_De = e.LeiXing;
			this.QingQiu_QuanJu();
		},
		methods: {
			QingQiu_QuanJu(){
				uni.request({
					url:this.$_PeiZhi_WenJian() + "QuanJu.json",
					success: (res) => {
						this.TuiJian_HuaTi_LieBiao = res.data.HuaTi_TuiJian;
					}
				})
			},
			// 点击，插入
			DianJi_ChaRu(e,hname){
				if(e == 'XuanZe'){
					uni.setStorage({
						key: 'XuanZhong_HuaTi',
						data: hname,
						success: (res) => {
							if(this.ShiFou_ZuJian_GuoLai_De){
								uni.$emit('HuaTi_LieBiao_HuiTiao')
							}
							uni.navigateBack();
						}
					});
				}
				if(e == 'ShuRu'){
					uni.setStorage({
						key: 'XuanZhong_HuaTi',
						data: this.HuaTi_NeiRong,
						success: (res) => {
							if(this.ShiFou_ZuJian_GuoLai_De){
								uni.$emit('HuaTi_LieBiao_HuiTiao')
							}
							uni.navigateBack();
						}
					});
				}
			},
			DianJi_QieHuan_Tab(e){
				this.QieHuanKa = e;
				if(e == 2){
					this.QingQiu_HuaTi_LieBiao();
				}
			},
			QingQiu_HuaTi_LieBiao(){
				uni.request({
					url:this.$_URL() + "/api/v2/hashtag/list",
					method:'GET',
					header:this.$_Fresns_Header(),
					data:{
						"orderType":"post",
						"whitelistKeys":"hid,hname,postCount"
					},
					success: (res) => {
						this.HuaTi_LieBiao = res.data.data.list;
					}
				})
				uni.request({
					url:this.$_URL() + "/api/v2/hashtag/list",
					method:'GET',
					header:this.$_Fresns_Header(),
					data:{
						"whitelistKeys":"hid,hname,postCount"
					},
					success: (res) => {
						this.HuaTi_LieBiao_ZuiXin = res.data.data.list;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.TuiJian-HuaTi-LieBiao{
	margin: 0 25rpx 25rpx 25rpx;
	display: flex;
	flex-wrap: wrap;
	view{
		font-size: 28rpx;
		line-height: 28rpx;
		border: 1rpx solid $BianKuangSe;
		margin: 25rpx 25rpx 0 0;
		padding: 15rpx 20rpx;
		border-radius: 100rpx;
	}
}
.HuaTi-ShuRu{
	border: 1rpx solid $BianKuangSe;
	margin: 25rpx 25rpx 0 25rpx;
	display: flex;
	height: 100rpx;
	overflow: hidden;
	text{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100rpx;
		height: 100rpx;
		background: $BeiJingSe;
		font-size: 50rpx;
		line-height: 50rpx;
		flex-shrink: 0;
	}
	input{
		flex: 1;
		height: 100rpx;
		font-size: 35rpx;
		text-align: center;
	}
	view{
		display: flex;
		align-items: center;
		flex-shrink: 0;
		height: 100rpx;
		padding: 0 35rpx;
		background: $LanSe;
		color: #FFF;
	}
}
</style>
